precision mediump float;

uniform vec2 u_resolution;
// 起点坐标
vec2 startP = vec2(-1,-1);
// 终点坐标
vec2 endP = vec2(1,1);
// 终点到起点的向量
vec2 se = endP - startP;
// 终点到起点的长度
float len = length(se);
// 终点到起点的单位向量
vec2 normal = normalize(se);
// 颜色集合
vec4 colors[3];
// 节点集合
float rations[3];

void main (){
  // 将坐标系原点放置在中心
  vec2 uv = ( 2.0 * gl_FragCoord.xy - u_resolution.xy) / min(u_resolution.x,u_resolution.y);

  colors[0] = vec4(1,0,0,1);
  colors[1] = vec4(1,1,0,1);
  colors[2] = vec4(0,1,0,1);
  rations[0] = 0.0;
  rations[1] = 0.5;
  rations[2] = 1.0;

  // 像素点减去起点后得到的向量
  vec2 sf = vec2(uv) - startP;
  // 像素在单位向量上的正射投影
  float fsLen = clamp(dot(sf,normal),0.0,len);
  // (正射投影 / 长度 )比
  float ration = clamp(fsLen / len,rations[0],rations[2]);
  for(int i=0; i<3; i++){
    // 第一个比值
    float l = rations[i];
    // 第一个颜色
    vec4 c = colors[i];
     // 第二个比值
    float l1 = rations[i+1];
    // 第二个颜色
    vec4 c1 = colors[i+1];
    if(ration >= l && ration <= l1){
      // 颜色差值
      vec4 dc = c1-c;
      float dl = (ration - l) / (l1 - l) ;
      gl_FragColor=c + dc * dl;
      break;
    }
  }
}